<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>张大帅 - 王美丽 | 一生有你</title>
    <meta name="description" content="张大帅 - 王美丽 | 一生有你">
    <meta name="keywords" content="云传意;homeapp.top">
    <link rel="stylesheet" type="text/css" href="love/css/lovexhj.css?k=20200605165021">
    <link rel="stylesheet" href="love/css/swiper.css?k=20200605165021">
    <link rel="stylesheet" type="text/css" href="love/css/FiraCode.css?k=20200605165021">
    <link rel="stylesheet" href="love/css/view-22157b6.min.css?k=20200605165021">

    <link rel="stylesheet" href="plugin/vant/index.css?k=20200605165021"/>
    <style>.van-doc-demo-block__title {
            margin: 0;
            padding: 32px 16px 16px;
            color: rgba(69, 90, 100, 0.6);
            font-weight: normal;
            font-size: 14px;
            line-height: 16px;
        }

        .van-doc-demo-block:first-of-type .van-doc-demo-block__title {
            padding-top: 20px;
        }
    </style>
</head>

<body>
<div id="app">
    <!-- 我要制作弹窗 -->
    <van-popup
            v-model="popushow"
            closeable
            close-icon="close"
            position="bottom"
            :style="{ height: '35%' }"
    >
        <van-form @submit="onSubmit">
            <h2 class="van-doc-demo-block__title">我要定制</h2>
            <van-field
                    v-model="name"
                    name="name"
                    label="昵称"
                    placeholder="昵称"
                    :rules="[{ required: true, message: '请填写昵称' }]"
            ></van-field>
            <van-field
                    v-model="QQ"
                    name="QQ"
                    label="QQ"
                    placeholder="QQ"
                    :rules="[{ required: true, message: '请填写QQ' }]"
            ></van-field>
            <van-field
                    v-model="phone"
                    name="phone"
                    label="手机号码"
                    placeholder="手机号码"
                    :rules="[{ required: true, message: '请填写手机号码' }]"
            ></van-field>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </van-popup>
    <!--  下拉图标 music -->
    <section class="u-arrow-bottom" style="bottom: 30px;">
        <div class="pre-wrap-bottom">
            <div class="pre-box1">
                <div class="pre1"></div>
            </div>
            <div class="pre-box2">
                <div class="pre2"></div>
            </div>
        </div>
    </section>
    <div class="bgm-btn-wraper" _tracker_click_="_tracker_click_" style="display: block;">
        <div class="bgm-btn rotate" data-event="11205" _tracker_click_="_tracker_click_" id="t_music"
             style="animation-play-state: running;">
            <audio id="t_audio" loop="" src="https://res1.eqh5.com/o_1d60p4ffj1c4o1jgj1uat1nh817v64f.mp3" autoplay=""
                   preload=""></audio>
        </div>
    </div>
    <!--  下拉图标 music -->

    <!-- 首页动态显示 情侣姓名 -->
    <div class="title">
        <img src="love/images/bg1.gif" alt="bgGif">
        <p id="tqyxhj"></p>
    </div>

    <!-- 分页1 - 骚话 -->
    <div class="page page1">
        <div class="swiper-container swiper-container-lovexhj1">
            <div class="swiper-wrapper">


                <div class="swiper-slide" v-for="(love,index) in showlove_texts">

                    <div v-if="index == 0" class="page1-lovexhj1">
                        <img src="https://q1.qlogo.cn/g?b=qq&nk=304915556&s=640" alt="xhj">
                        <img src="love/images/cat.gif" alt="cat">
                        <img src="https://q1.qlogo.cn/g?b=qq&nk=1656071287&s=640" alt="tqy">
                        <p>${timeshow} </p>
                        <p>我也不知道该准备一点什么给你逗你开心</p>
                        <p>还是写一点好玩的送给你吧~</p>
                        <span class="right">往右划动 →</span>
                    </div>

                    <div v-else-if="index == showlove_texts.length-1 " class="page1-lovexhj1">
                        <div class="swiper-slide">
                            <div class="page1-lovexhj1">
                                <img class="cat" src="love/images/cat4.gif" alt="cat4">
                                <p class="catText">拍你猪头 ↑</p>
                                <p>这次应该不会太难看了吧</p>
                                <p>希望你喜欢呀</p>
                                <p>爱你哟(๑′ᴗ‵๑)</p>
                                <b>520快乐我的<span style="color: pink;">猪</span></b>
                            </div>
                        </div>
                    </div>

                    <div v-else class="page1-lovexhj1">
                        <img class="cat" src="love/images/cat2.gif" alt="cat2">
                        <p class="catText">你常对我发的表情 ↑</p>
                        <p>上次也是花心思写了一个小玩意给你</p>
                        <p>但我觉得整体设计&&界面都过于<b>LOW</b></p>
                        <p>那就重新送你一个吧</p>
                        <span class="right">再划一下 →</span>
                    </div>
                </div>

            </div>
            <div class="swiper-pagination swiper-pagination-lovexhj1"></div>
        </div>
    </div>

    <!-- 分页2 - 时间轴 -->
    <div class="page page2">
        <div class="swiper-container swiper-container-lovexhj2">
            <div class="swiper-wrapper">

                <div class="swiper-slide" v-for="time in time_texts">
                    <div class="page2-box">
                        <img :src="time.img" alt="page2-1">
                        <p><b>${time.title}</b></p>
                        <p> ${time.content}</p>
                    </div>
                </div>

            </div>
            <div class="swiper-pagination swiper-pagination-lovexhj2"></div>
        </div>
    </div>

    <!-- 分页3 - 一段话 -->
    <div class="page page3">
        <div id="talkToyou" style="font-size: larger;">
        </div>
    </div>

    <!-- 分页4 - 结尾 -->
    <div class="page page4">
        <div class="page4-box">
            <div class="page4-img">
                <div class="swiper-container swiper-container-lovexhj3">
                    <div class="swiper-wrapper">

                        <div class="swiper-slide" v-for="img in imgs_text">
                            <img :src="img.picurl">
                        </div>

                    </div>
                    <div class="swiper-button-prev swiper-button-prev-lovexhj3"></div>
                    <div class="swiper-button-next swiper-button-next-lovexhj3"></div>
                </div>
            </div>
            <div class="page4-text">
                <h1>Send To Future</h1>
                <p>有你在的每一天都如糖果一样甜</p>
            </div>
        </div>

        <div class="footer">
            <div class="footerBox">
                <p @click="makeForme">我要定制</p>
                <p>
                    &copy; 2020
                    <a href="#">张大帅 && 王美丽</a>
                </p>
                <p>模板驱动 BY <a href="https://lovexhj.cn" target="_blank">lovexhj</a></p>
            </div>
        </div>
    </div>

    <!-- 两只XHJ一样的猪 -->
    <div class="xhjIsPig">
        <img src="love/images/pig1.gif" alt="pig1" class="pig1">
        <img src="love/images/pig2.gif" alt="pig2" class="pig2">
    </div>

</div>


<!-- js加载 -->
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>


<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="plugin/vant/vue.min.js"></script>

<script src="love/js/wow.js"></script>
<script src="love/js/typeit.min.js"></script>
<script src="love/js/swiper-3.4.2.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
<script src="love/js/su.js"></script>
<script src="plugin/vant/vant.min.js"></script>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('body').wpSuperSnow({
            flakes: ['love/images/004.png', 'love/images/003.png', 'love/images/002.png',
                'love/images/001.png'
            ],
            totalFlakes: '100',
            zIndex: '999999',
            maxSize: '30',
            maxDuration: '20',
            useFlakeTrans: false
        });


        var t_audio = $("#t_audio")[0];
        var tar = $("#t_music")

        $("#t_music").click(function (e) {
            if (t_audio.paused) {
                t_audio.play();// 播放
                tar.addClass("rotate")
            } else {
                t_audio.pause();// 暂停
                tar.removeClass("rotate")
            }
        });


    });
</script>


<script>
    new Vue({
        delimiters: ['${', '}'],
        el: '#app',
        data() {
            return {
                //手动配置的参数 start
                meetDate: ["2020", "01", "01"],//年 月 日
                lovers_name: "张大帅 && 王美丽1",
                title_text: "我想和你一起慢慢变老...",
                showlove_texts: [
                    "1111111111111111",
                    "showlove2.。。。。。。。。。。。。。。。。。",
                    "showlove3.。。。。。。。。。。。。。。。。。",

                ],
                time_texts: [
                    {
                        content: "亲爱的，你知道吗？如果有一千个人从我身边走过，我也可以听出你的脚步声。因为有个是踏在地上，只有你踏在我的心上！！",
                        img: "love/selfimages/4.jpg",
                        title: "故事的开始"
                    },
                    {
                        content: "今天，你说你黄昏就来，已错过雨季，又错过花期，不能再错过你，那将是一生的错过呵！亲爱的，你说你黄昏就来，我情愿从黎明开始等待，等待你。",
                        img: "love/selfimages/5.gif",
                        title: "我们的爱情"
                    },

                ],
                imgs_text: [
                    {picurl: 'love/selfimages/1.jpg', other: ''},
                    {picurl: 'love/selfimages/2.jpg', other: ''},
                    {picurl: 'love/selfimages/3.jpg', other: ''},

                ],


                //不需要设置的内容
                timeshow: "",
                timer: null,
                popushow: false,
                name: '',
                QQ: '',
                phone: '',
            }
        },
        methods: {
            onSubmit(values) {
                console.log('submit', values);
                values.ip = returnCitySN["cip"]
                values.city = returnCitySN["cname"]
                var self = this;
                $.ajax({
                    type: "post",
                    url: "https://homeapp.top/love/makeForMe",
                    data: values,
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        if (data.state == "success") {
                            vant.Dialog.alert({
                                message: '您已经提交成功，请等候联系!',
                            }).then(() => {
                                // on close
                                self.popushow = false;
                                self.name = "";
                                self.QQ = "";
                                self.phone = "";
                            });
                        } else if ("repeat" == data.state) {
                            vant.Dialog.alert({
                                message: '您已经提供，请勿重复提交!',
                            }).then(() => {
                                // on close
                                self.popushow = false;
                                self.name = "";
                                self.QQ = "";
                                self.phone = "";
                            });
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log(errorThrown);
                    }
                });

            },
            makeForme: function () {
                console.log(1)
                this.popushow = true;
            },
            swiperInit: function () {
                var swiper = new Swiper('.swiper-container-lovexhj1', {
                    pagination: '.swiper-pagination-lovexhj1',
                    paginationClickable: true,
                    spaceBetween: 30,
                });

                var swiper = new Swiper('.swiper-container-lovexhj2', {
                    pagination: '.swiper-pagination-lovexhj2',
                    effect: 'coverflow',
                    grabCursor: true,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    coverflow: {
                        rotate: 50,
                        stretch: 0,
                        depth: 100,
                        modifier: 1,
                        slideShadows: true
                    }
                });

                var swiper = new Swiper('.swiper-container-lovexhj3', {
                    pagination: '.swiper-pagination-lovexhj3',
                    effect: 'flip',
                    grabCursor: true,
                    nextButton: '.swiper-button-next-lovexhj3',
                    prevButton: '.swiper-button-prev-lovexhj3'
                });
            },
            dynamicTime: function () {
                //window.setTimeout("lovetime()", 1000);
                var seconds = 1000
                var minutes = seconds * 60
                var hours = minutes * 60
                var days = hours * 24
                var years = days * 365
                var today = new Date()
                var todayYear = today.getFullYear()
                var todayMonth = today.getMonth()
                var todayDate = today.getDate()
                var todayHour = today.getHours()
                var todayMinute = today.getMinutes()
                var todaySecond = today.getSeconds()
                var t1 = Date.UTC(this.meetDate[0], this.meetDate[1], this.meetDate[2], 00, 00, 00)
                var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
                var diff = t2 - t1
                var diffYears = Math.floor(diff / years)
                var diffDays = Math.floor((diff / days) - diffYears * 365)
                var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
                var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
                var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes *
                    minutes) / seconds)
                this.timeshow = "我们相遇" + diffYears + "年" + diffDays + "天" +
                    diffHours + "小时" + diffMinutes + "分钟" + diffSeconds + "秒啦";

            },
            dynamicShow: function () {
                new TypeIt("#tqyxhj", {
                    loop: true,
                    cursorSpeed: 1000,
                    speed: 100
                })
                    .type(this.lovers_name)
                    .pause(2000)
                    .delete(null, {
                        delay: 500
                    })
                    .type(this.title_text)
                    .pause(3000)
                    .go();

                new TypeIt('#talkToyou', {
                    lifeLike: true,
                    strings: ["世界上最深沉的不是大海，而是你的心灵。我把自已整个都抛下，却不见泛起一丝涟漪！我好想你！",
                        "我是今生的水，你是前世的茶，用今生的水来泡一杯前世的茶，透明的瓷杯里，沉淀的是前世的情，沸腾的是今生的爱，这味道就叫做：缘份。",
                        "期待又一次落空，你是我旅途中的站台;列车与铁轨相伴，而我却留不住你的缠绵;车轮终于沉寂，啤酒、诗歌和烟，你让我挑选，我一样都不喜欢。",
                        "你可能只是这个世界上的一个人，但对于某人来说你就是全世界。",
                        "爱你是一种美丽，但想你只是一种回忆。所以我不要想你，我只会好好爱你，让我们永远在一起。",
                        "想你在每一个有星星的夜晚！念你在每一刻欢乐的时光！盼你在每一次想你的瞬间！爱你在每一秒呼吸的间隙！"
                    ],
                    cursorSpeed: 1000,
                    waitUntilVisible: true,
                    speed: 100
                }).go();
            },

        },
        mounted() {
            this.dynamicShow();
            this.swiperInit();
            new WOW().init()


            this.timer = setInterval(this.dynamicTime, 1000);

        }
    });

</script>
</body>

</html>